<template>
  <div class="app-container">
    <div>
      <span style="font-size: 25px;">设备接入流程概览</span>
      <div style="margin-top: 20px;padding: 10px;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);">
        <el-row :gutter="12">
          <el-col :span="4">
            <el-card class="box-card" shadow="hover">
              <div>
                <div style="float: left;margin-right: 5px;height: 50px;"><span style="color: #409EFF;font-size: 25px;"><b>01</b></span></div>
                <div style="font-size: 16px;">
                  创建产品
                </div>
                <div style="font-size: 14px;color: grey;">
                  产品是同品类设备的集合
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="box-card" shadow="hover">
              <div>
                <div style="float: left;margin-right: 5px;height: 50px;"><span style="color: #409EFF;font-size: 25px;"><b>02</b></span></div>
                <div style="font-size: 16px;">
                  创建设备
                </div>
                <div style="font-size: 14px;color: grey;">
                  创建设备获取连接平台所需的身份信息
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="box-card" shadow="hover">
              <div>
                <div style="float: left;margin-right: 5px;height: 50px;"><span style="color: #409EFF;font-size: 25px;"><b>03</b></span></div>
                <div style="font-size: 16px;">
                  设备端开发
                </div>
                <div style="font-size: 14px;color: grey;">
                  集成Link SDK，开发设备端程序
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="box-card" shadow="hover">
              <div>
                <div style="float: left;margin-right: 5px;height: 50px;"><span style="color: #409EFF;font-size: 25px;"><b>04</b></span></div>
                <div style="font-size: 16px;">
                  查看上报数据
                </div>
                <div style="font-size: 14px;color: grey;">
                  查看设备上报的属性数据 SDK，开发设备端程序
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card class="box-card" shadow="hover">
              <div>
                <div style="float: left;margin-right: 5px;height: 50px;"><span style="color: #409EFF;font-size: 25px;"><b>Next</b></span></div>
                <div style="font-size: 16px;">
                  接下来，建议您可以：
                </div>
                <div style="font-size: 14px;color: grey;">
                  配置数据流转
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="margin-top: 20px;">
      <el-button type="primary" @click="builders()" size="medium" style="margin-bottom: 20px;">创建产品</el-button>
      <el-table :data="productList" style="width: 100%" :cell-style="cellStyle" :header-cell-style="{background:'#F7F7F8', color:'#18191B', 'text-align':'center'}">  
        <el-table-column prop="name" label="产品名称" align="center">
        </el-table-column>
        <el-table-column prop="productKey" label="ProductKey" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-link @click="seedetail(scope.row.id)" type="primary" :underline="false">详情</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link @click="delete1(scope.row.id)" type="primary" :underline="false">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageDto.nowPage"
        :page-sizes="[5, 10]" :page-size="pageDto.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

      <el-dialog title="产品详情" :visible.sync="dialogFormVisible">
        <el-descriptions class="margin-top" title="产品详情" :column="2" size="middle" border>
          <el-descriptions-item>
            <template slot="label">
              产品ID
            </template>
            {{ product.tenantId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              产品名称
            </template>
            {{ product.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              ProductKey
            </template>
            {{ product.productKey }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              用户名
            </template>
            {{ product.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              密码
            </template>
            {{ product.password }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              创建时间
            </template>
            {{ product.createTime | dateFormat }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>

      <el-dialog title="新建产品" :visible.sync="dialogFormVisible1" width="500px">
        <el-form :model="productAdd" :rules="rules" ref="productAdd" label-width="100px" class="demo-ruleForm"
          label-position="top" size="mini">
          <el-form-item label="产品名称" prop="name">
            <el-input v-model="productAdd.name" placeholder="请输入产品名称"></el-input>
          </el-form-item>
          <el-form-item label="所属区域" prop="areaCode">
            <el-cascader v-model="productAdd.areaCode" :options="area" :props="{ expandTrigger: 'hover' }"></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetForm('productAdd')">重置</el-button>
          <el-button @click="dialogFormVisible = false; resetForm('productAdd')">取 消</el-button>
          <el-button type="primary" @click="submitForm('productAdd')">确 定</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { page, add, details, deletes, findAll } from '../../api/product'
export default {
  data() {
    return {
      productList: [],
      pageDto: {
        now: 1,
        size: 5,
        where: {
        }
      },
      productAdd: {
        name: "",
        areaCode: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' },
        ],
        areaCode: [
          { required: true, message: '请选择所属区域', trigger: 'blur' },
        ],
      },

      product: {
        // id:0,
        tenantId: "",
        name: "",
        productKey: "",
        username: "",
        password: "",
        createTime: "",
      },

      pages: 0,
      total: 0,
      input: '',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      area: []
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.productAdd).then((res) => {
            if (res.code == 0) {
              this.dialogFormVisible1 = false;
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
            } else {
              this.$message.error('添加失败！');
            }
          })

        } else {
          this.$message.error('关键信息未填写！');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //格式日期
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      console.log(row, column)
      if (daterc) {
        if (daterc.indexOf('T') === -1) return daterc
        const arr = daterc.split('T')
        const d = arr[0]
        const darr = d.split('-')
        const t = arr[1]
        const tarr = t.split('.000')
        const marr = tarr[0].split(':')
        const dd = darr[0] + '-' + darr[1] + '-' + darr[2] + ' ' + marr[0] + ':' + marr[1] + ':' + marr[2].substring(0, 2)
        return dd
      }
    },

    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return "color:#409EFF";
      }
      return "";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleSizeChange(size) {
      this.pageDto.size = size,
        this.search()
    },
    handleCurrentChange(now) {
      this.pageDto.now = now,
        this.search()
    },
    search() {
      page(this.pageDto).then(res => {
        // console.log(res);
        this.productList = res.list;
        this.pages = res.pages,
          this.total = res.total
      })
      findAll().then((res) => {
        this.area = res.data
        var children = new Array()
        for (var i = 0; i < this.area.length; i++) {
          if (this.area[i].children.length < 1) {
            // children若为空数组，则将children设为undefined
            this.area[i].children = undefined;
          } else {
            children = this.area[i].children
            for (var j = 0; j < children.length; j++) {
              if (children[j].children.length < 1) {
                // children若为空数组，则将children设为undefined
                children[j].children = undefined;
              }
            }
            this.area[i].children = children;
            children = []
          }
        }
      })
    },
    seedetail(id) {
      // console.log(id);
      this.dialogFormVisible = true;
      details(id).then(res => {
        // this.product=res;
        this.product = res[0];
        // this.dialogFormVisible=false;

      })
      // console.log("product"+this.product)
    },
    builders() {
      this.dialogFormVisible1 = true
    },
    delete1(id) {
      this.$confirm('此操作将永久删除该产品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletes(id).then(res => {
          if (res.code == 1) {
            this.$message({
              type: 'info',
              message: '删除失败，请先删除当前产品所关联的设备！'
            });
          };
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          };
          this.search()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    }
  },
  created() {
    this.search()
  },
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}

.el-card__body {
  padding-top: 10px;
  padding-left: 10px;
  height: 80px;
}
</style>